<template>
  <div class="wrap">
    <div class="search">
      <input type="text" @keyup.enter="search" v-model="name" placeholder="输入姓名" />
      <img src="../assets/search.png" alt @click="search" />
    </div>
    <div class="title">
      <div class="left">
        <img src="../assets/address.png" alt />
        <p>我的地址</p>
      </div>
      <p class="add" @click="go_address">新增地址</p>
    </div>
    <div class="list" v-if="adList.length">
      <div class="item" v-for="item in adList" :key="item.address_id">
        <div class="le" @click="state?sel(item):''">
          <div>
            <p>{{item.name}}</p>
            <p>{{item.tel}}</p>
          </div>
          <p>{{item.province+item.city+item.district+item.content}}</p>
        </div>
        <div class="ri">
          <span @click="edit(item)">编辑</span>
          <span @click="del(item)">删除</span>
        </div>
      </div>
    </div>
    <div class="null" v-if="!adList.length">
      <p>还没有地址，赶快去新增吧</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.search {
  background: #eeeded;
  height: 1.066667rem;
  width: 9.2rem;
  margin: 0.306667rem auto 0.4rem;
  border-radius: 0.266667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  input {
    border: none;
    outline: none;
    background: transparent;
    margin-left: 15px;
    flex: 2;
  }
  img {
    width: 0.533333rem;
    height: 0.533333rem;
    display: block;
    margin-right: 15px;
  }
}
.title {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 8.16rem;
  margin: 0 auto;
  .left {
    display: flex;
    align-items: center;
  }
  img {
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.2rem;
  }
  p {
    color: #999;
    font-size: 0.32rem;
  }
  .add {
    background: #3fd9c9;
    color: #fff;
    font-size: 0.32rem;
    padding: 2px 15px;
    border-radius: 0.4rem;
  }
}
.list {
  padding-top: 0.8rem;
  .item {
    width: 8.16rem;
    margin: 0 auto 15px;
    height: 1.493333rem;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .le {
        flex: 2;
      div {
        display: flex;
        align-items: center;
        p {
          color: #555;
          font-size: 0.373333rem;
          font-weight: 600;
          margin-right: 15px;
          text-align: left;
          line-height: 0.6rem;
        }
      }
      > p {
        color: #999;
        font-size: 0.293333rem;
        text-align: left;
      }
    }
    .ri {
      span {
        color: #3fd9c9;
        font-size: 0.32rem;
        margin-left: 8px;
      }
    }
  }
}
</style>
<script>
import { addressList, deleteAddress } from "@/utils/interface";
import { Toast , Dialog } from "vant";

export default {
  data() {
    return {
      adList: [],
      state:false,
      name:""
    };
  },
  created() {
    document.title="地址簿管理"
      if(this.$route.query.name){
          this.state = true
      }
    this.getList();
  },
  methods: {
    go_address() {
      this.$router.push("/setAddress");
    },
    search(){
this.getList(this.name)
    },
    getList(name) {
      addressList({name}).then(res => {
        this.adList = res.data.data;
      });
    },
    edit(item) {
      this.$router.push({
        path: "editAddress",
        query: { data: JSON.stringify(item) }
      });
    },
    del(item) {
      Dialog.confirm({
        title: "提示",
        message: "是否删除该地址"
      })
        .then(() => {
          // on confirm
          deleteAddress([item.address_id]).then(res => {
            if (res.data.code == 200) {
                  this.getList();
              Toast.success("删除成功");
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    sel(item){
        if(this.$route.query.type==1){
            this.$store.commit('setAddress1',item)
        }else if(this.$route.query.type==2){
            this.$store.commit('setAddress2',item)
        }
        this.$router.go(-1)
    }
  }
};
</script>